<!--  -->
<template>
  <div id="app">
    <div class="box border">
      <div class="head">
        <span class="back" @click="back">返回</span>
        <span class="title">两市交易总量</span>
      </div>
      <div class="tag clear">
        <span class="label fl">数据区间</span>
        <span
          class="item fl"
          :class="{ cur: type == 'one' }"
          @click="type = 'one'"
          >1日</span
        >
        <span
          class="item fl"
          :class="{ cur: type == 'threed' }"
          @click="type = 'threed'"
          >3日</span
        >
        <span
          class="item fl"
          :class="{ cur: type == 'fived' }"
          @click="type = 'fived'"
          >5日</span
        >
        <span
          class="item fl"
          :class="{ cur: type == 'tend' }"
          @click="type = 'tend'"
          >10日</span
        >
      </div>
      <table>
        <thead>
          <tr>
            <td rowspan="2" class="cur" @click="tagSort(keys[type][1])">
              交易日期<i
                class="icon"
                :class="['down', 'up'][sequence]"
                v-show="cur == 1"
              ></i>
            </td>
            <td rowspan="2" class="cur" @click="tagSort(keys[type][2])">
              收盘<br />-沪深300<i
                class="icon"
                :class="['down', 'up'][sequence]"
                v-show="cur == 2"
              ></i>
            </td>
            <td rowspan="2" class="cur" @click="tagSort(keys[type][3])">
              涨跌幅(%)<br />-沪深300<i
                class="icon"
                :class="['down', 'up'][sequence]"
                v-show="cur == 3"
              ></i>
            </td>
            <td colspan="5">融资</td>
            <td colspan="5">融券</td>
            <td
              rowspan="2"
              class="cur"
              @click="tagSort(keys[type][14])"
              v-show="type == 'one'"
            >
              融资融券<br />余额(元)<i
                class="icon"
                :class="['down', 'up'][sequence]"
                v-show="cur == 14"
              ></i>
            </td>
            <td
              rowspan="2"
              class="cur"
              @click="tagSort(keys[type][15])"
              v-show="type == 'one'"
            >
              融资融券<br />余额差值(元)<i
                class="icon"
                :class="['down', 'up'][sequence]"
                v-show="cur == 15"
              ></i>
            </td>
          </tr>
          <tr>
            <td class="cur" @click="tagSort(keys[type][4])">
              余额<br />(元)<i
                class="icon"
                :class="['down', 'up'][sequence]"
                v-show="cur == 4"
              ></i>
            </td>
            <td class="cur" @click="tagSort(keys[type][5])">
              余额占流<br />通市值比<i
                class="icon"
                :class="['down', 'up'][sequence]"
                v-show="cur == 5"
              ></i>
            </td>
            <td class="cur" @click="tagSort(keys[type][6])">
              买入额<br />(元)<i
                class="icon"
                :class="['down', 'up'][sequence]"
                v-show="cur == 6"
              ></i>
            </td>
            <td class="cur" @click="tagSort(keys[type][7])">
              偿还额<br />(元)<i
                class="icon"
                :class="['down', 'up'][sequence]"
                v-show="cur == 7"
              ></i>
            </td>
            <td class="cur" @click="tagSort(keys[type][8])">
              净买入<br />(元)<i
                class="icon"
                :class="['down', 'up'][sequence]"
                v-show="cur == 8"
              ></i>
            </td>
            <td class="cur" @click="tagSort(keys[type][9])">
              余额<br />(元)<i
                class="icon"
                :class="['down', 'up'][sequence]"
                v-show="cur == 9"
              ></i>
            </td>
            <td class="cur" @click="tagSort(keys[type][10])">
              余量<br />(股)<i
                class="icon"
                :class="['down', 'up'][sequence]"
                v-show="cur == 10"
              ></i>
            </td>
            <td class="cur" @click="tagSort(keys[type][11])">
              卖出量<br />(股)<i
                class="icon"
                :class="['down', 'up'][sequence]"
                v-show="cur == 11"
              ></i>
            </td>
            <td class="cur" @click="tagSort(keys[type][12])">
              偿还量<br />(股)<i
                class="icon"
                :class="['down', 'up'][sequence]"
                v-show="cur == 12"
              ></i>
            </td>
            <td class="cur" @click="tagSort(keys[type][13])">
              净卖出<br />(股)<i
                class="icon"
                :class="['down', 'up'][sequence]"
                v-show="cur == 13"
              ></i>
            </td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in typeData" :key="item.id">
            <td>{{ item.dim_date }}</td>
            <td :class="{ red: item[`zdfn`] > 0, green: item[`zdfn`] < 0 }">
              {{ item.close_price }}
            </td>
            <td :class="{ red: item[`zdfn`] > 0, green: item[`zdfn`] < 0 }">
              {{ item[`zdfStr`] }}
            </td>
            <td>{{ item.rzye }}</td>
            <td>{{ item.rzyezb }}</td>
            <td>{{ item[`rzmren`] }}</td>
            <td>{{ item[`rzchen`] }}</td>
            <td :class="{ red: item[`rzjmen`] > 0, green: item[`rzjmen`] < 0 }">
              {{ item[`rzjmeStr`] }}
            </td>
            <td>{{ item.rqye }}</td>
            <td>{{ item.rqyl }}</td>
            <td>{{ item[`rqmcln`] }}</td>
            <td>{{ item[`rqchln`] }}</td>
            <td :class="{ red: item[`rqjmgn`] > 0, green: item[`rqjmgn`] < 0 }">
              {{ item[`rgjmgStr`] }}
            </td>
            <td v-show="type == 'one'">{{ item.rzrqye }}</td>
            <td v-show="type == 'one'">{{ item.rzrqyecz }}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <m-page
      @onPage="onPage"
      :pageSize="send.pageSize"
      :currentPage="send.pageNo"
      :total="total"
    ></m-page>
  </div>
</template>

<script>
import { getChatPage } from "../api/index";
import { numberFormat } from "../script/utils";
import mPage from "./mPage";

export default {
  data() {
    return {
      tableData: [],
      typeData: [],
      type: "one",
      cur: 1,
      sequence: 0,
      send: {
        pageSize: 30,
        pageNo: 1,
        field: "dim_date",
        sort: "desc",
      },
      total: 0,
      keys: {
        one: [
          "id",
          "dim_date", //日期
          "close_price", //收盘价
          "zdf", //涨跌幅
          "rzye", //融资余额
          "rzyezb", //当日余额占流通市值比
          "rzmre", //融资买入额
          "rzche", //融资偿还额
          "rzjme", //融资净买入
          "rqye", //融券余额
          "rqyl", //融券余量
          "rqmcl", //融券卖出量
          "rqchl", //融券偿还量
          "rqjmg", //融券净卖出
          "rzrqye", //融资融券余额
          "rzrqyecz", //融资融券余额差值
        ],
        threed: [
          "id",
          "dim_date", //日期
          "close_price", //收盘价
          "zdf_threed", //涨跌幅
          "rzye", //融资余额
          "rzyezb", //当日余额占流通市值比
          "rzmre_threed", //融资买入额
          "rzche_threed", //融资偿还额
          "rzjme_threed", //融资净买入
          "rqye", //融券余额
          "rqyl", //融券余量
          "rqmcl_threed", //融券卖出量
          "rqchl_threed", //融券偿还量
          "rqjmg_threed", //融券净卖出
          "rzrqye", //融资融券余额
          "rzrqyecz", //融资融券余额差值
        ],
        fived: [
          "id",
          "dim_date", //日期
          "close_price", //收盘价
          "zdf_fived", //涨跌幅
          "rzye", //融资余额
          "rzyezb", //当日余额占流通市值比
          "rzmre_fived", //融资买入额
          "rzche_fived", //融资偿还额
          "rzjme_fived", //融资净买入
          "rqye", //融券余额
          "rqyl", //融券余量
          "rqmcl_fived", //融券卖出量
          "rqchl_fived", //融券偿还量
          "rqjmg_fived", //融券净卖出
          "rzrqye", //融资融券余额
          "rzrqyecz", //融资融券余额差值
        ],
        tend: [
          "id",
          "dim_date", //日期
          "close_price", //收盘价
          "zdf_tend", //涨跌幅
          "rzye", //融资余额
          "rzyezb", //当日余额占流通市值比
          "rzmre_tend", //融资买入额
          "rzche_tend", //融资偿还额
          "rzjme_tend", //融资净买入
          "rqye", //融券余额
          "rqyl", //融券余量
          "rqmcl_tend", //融券卖出量
          "rqchl_tend", //融券偿还量
          "rqjmg_tend", //融券净卖出
          "rzrqye", //融资融券余额
          "rzrqyecz", //融资融券余额差值
        ],
      },
    };
  },
  watch: {
    type() {
      this.send.field = this.keys[this.type][this.cur];
      this.tag();
    },
  },
  components: { "m-page": mPage },
  beforeRouteEnter(to, from, next) {
    const { type } = to.params;
    next((vm) => {
      vm.type = type;
    });
  },
  mounted() {
    this.getChatPage();
  },

  methods: {
    tagSort(key) {
      console.log(this.keys[this.type][this.cur], key);
      this.sequence =
        this.keys[this.type][this.cur] == key ? +!this.sequence : 0;
      const index = this.keys[this.type].indexOf(key);
      this.cur = index;
      this.send.field = this.keys[this.type][index];
      this.send.sort = ["desc", "asc"][this.sequence];
      this.getChatPage();
    },
    back() {
      this.$router.push({ name: "index" });
    },
    onPage(num) {
      this.send.pageNo = num;
      this.getChatPage();
    },
    tag() {
      const arr = [];
      const k1 = `zdf${this.type == "one" ? "" : "_" + this.type}`;
      const k2 = `rzmre${this.type == "one" ? "" : "_" + this.type}`;
      const k3 = `rzche${this.type == "one" ? "" : "_" + this.type}`;
      const k4 = `rzjme${this.type == "one" ? "" : "_" + this.type}`;
      const k5 = `rqmcl${this.type == "one" ? "" : "_" + this.type}`;
      const k6 = `rqchl${this.type == "one" ? "" : "_" + this.type}`;
      const k7 = `rqjmg${this.type == "one" ? "" : "_" + this.type}`;
      this.tableData.map((item, i) => {
        // if (i > this.send.pageSize - 1) return;
        const obj = {};
        Object.keys(item).map((k) => {
          if (this.keys[this.type].includes(k)) {
            switch (k) {
              case k1:
                obj["zdfn"] = item[k];
                obj["zdfStr"] = item[k] ? numberFormat(item[k]) + "%" : 0;
                break;
              case k2:
                obj["rzmren"] = numberFormat(item[k]);
                break;
              case k3:
                obj["rzchen"] = numberFormat(item[k]);
                break;
              case k4:
                obj["rzjmen"] = item[k];
                obj["rzjmeStr"] = numberFormat(item[k]);
                break;
              case k5:
                obj["rqmcln"] = numberFormat(item[k]);
                break;
              case k6:
                obj["rqchln"] = numberFormat(item[k]);
                break;
              case k7:
                obj["rqjmgn"] = item[k];
                obj["rgjmgStr"] = numberFormat(item[k]);
            }
            obj[k] = item[k];
            obj.close_price = numberFormat(item.close_price);
            obj.rzye = numberFormat(item.rzye);
            obj.rqye = numberFormat(item.rqye);
            obj.rqyl = numberFormat(item.rqyl);
            obj.rzrqye = numberFormat(item.rzrqye);
            obj.rzrqyecz = numberFormat(item.rzrqyecz);
            obj.rzyezb = item.rzyezb ? numberFormat(item.rzyezb) + "%" : 0;
          }
        });
        // if (arr.length == 10) return;
        arr.push(obj);
      });
      this.typeData = arr;
    },
    async getChatPage() {
      await getChatPage(this.send).then((back) => {
        if (back.status == 1) {
          this.tableData = back.data.list;
          this.total = back.data.total;
          this.tag();
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../style/var.scss";
#app {
  padding-top: 14px;
}
.border {
  border: 2px solid $border;
  border-radius: 6px;
}
.box {
  background: $bg;
  .head {
    background: $border;
    line-height: 34px;
    text-align: center;
    position: relative;
    .back {
      color: #aaadb2;
      font-size: 14px;
      font-weight: 400;
      padding-left: 14px;
      position: absolute;
      left: 0;
      cursor: pointer;
      &::before {
        content: "";
        position: relative;
        top: 1px;
        margin-right: 8px;
        display: inline-block;
        width: 8px;
        height: 12px;
        background: url($PIC_URL + "/tlbypcWeb/securities/back.png") no-repeat
          center;
      }
    }
    .title {
      font-size: 18px;
      color: #ff4e39;
      font-weight: 400;
    }
  }
  .tag {
    line-height: 28px;
    background: $border;
    border: 1px solid $bg;
    span {
      color: #b3b3b3;
      display: inline-block;
      font-size: 14px;
      border-right: 1px solid $bg;
      padding: 0 18px;
      &.cur {
        background: #35497c;
        color: #ffffff;
      }
      &.item {
        padding: 0 15px;
        cursor: pointer;
      }
    }
  }
  table {
    width: 100%;
    color: #bcbfc4;
    font-size: 15px;
    text-align: center;
    line-height: 20px;
    // table-layout: fixed;
    td {
      padding: 8px 0;
    }
    thead {
      background: #1c1d21;
      td {
        border: 1px solid #323337;
        &.cur {
          cursor: pointer;
        }
        .icon {
          display: inline-block;
          width: 7px;
          height: 9px;
          margin-left: 5px;
          &.down {
            background: url($PIC_URL + "/tlbypcWeb/securities/grid_arrow.png")
              no-repeat center;
          }
          &.up {
            background: url($PIC_URL + "/tlbypcWeb/securities/grid_2.png")
              no-repeat center;
          }
        }
      }
    }
    tbody {
      td {
        border: 1px solid #25262a;
        &.red {
          color: #ea2827;
        }
        &.green {
          color: #31ed24;
        }
      }
      tr:nth-of-type(2n) {
        background: #111117;
      }
    }
  }
}
</style>
